<template>
  <div class="doubtPage cancelPadding secondary-page-mode">
      <div class="secondary-toolbar">
           <span>日期 : </span>
           <div class="layoutBox" style="width:120px">
            <el-date-picker v-model="dateRange" type="month" placeholder="请选择" value-format="yyyy-MM" :picker-options="startDateOpt()"></el-date-picker>
           </div>&emsp;&emsp;
          
            <el-button @click="search"><i class="iconfont icon-sousuo"></i>查询</el-button>
            <div class="lengbox layoutBox">
                  <span>已审核</span>
                  <span>存疑数据</span>
                  <span>无效数据</span>

            </div>
      </div>
      <div class="currency-mode-wrap">
            <el-table
              :data="tableData"
              border
             height="100%">
              <el-table-column
                type="index"
                label="序号"
                :index="indexMethod"
                width="50">
              </el-table-column>
              <el-table-column
                width="130"
                label="断面名称">
                  <template  slot-scope="scope">
                      <div>
                          <span v-if="scope.row.station">{{scope.row.station.value}}</span>
                      </div>
                  </template>
              </el-table-column>
              <el-table-column
                 width="120"
                label="MN号">
                  <template  slot-scope="scope">
                      <div>
                         <span v-if="scope.row.stationMn">{{scope.row.stationMn.value}}</span>
                      </div>
                  </template>
              </el-table-column>
               <el-table-column
                 width="200"
                 label="运维单位">
                  <template  slot-scope="scope">
                      <div>
                          <span v-if="scope.row.stationCom">{{scope.row.stationCom.value}}</span>
                      </div>
                  </template>
              </el-table-column>
              <el-table-column
                v-for="(item,key) in tableHead"
                :key="key"
                :prop="item.prop"
                width="40"
                :label="item.label1">
                    <template slot-scope="scope">
                      <div v-if="scope.row[item.prop]">
                            <span class="cellspan" 
                            :class="{'statusone':scope.row[item.prop].value==4,'statustwo':scope.row[item.prop].value==3,'statusthree':scope.row[item.prop].value==2,'statusfour':scope.row[item.prop].value==null,}" 
                            @click="goDetail(scope.row,item.prop)"
                            ></span>
                      </div>
                    </template>
              </el-table-column>
            </el-table>
      </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      dateRange: "",
      value: "",
      optionData: [
        { value: 1, label: "水温" },
        { value: 2, label: "pH" },
        { value: 3, label: "溶解氧" },
        { value: 4, label: "电导率" },
        { value: 5, label: "浊度" },
        { value: 6, label: "高锰酸盐" },
        { value: 7, label: "氨氮" },
        { value: 8, label: "总磷" },
        { value: 9, label: "总氮" },
        { value: 10, label: "叶绿素α" },
        { value: 11, label: "藻密度" },
        { value: 12, label: "总大肠菌群" },
        { value: 13, label: "耐热大肠菌群" },
        { value: 14, label: "大肠埃希始菌" }
      ],
      selectCheck: [],
      tableData: [
        { status: 0, nodeName: "金鱼石", nodeId: "10019", structureType: "3" }
      ],
      tableHead: [],
      stationMnList: []
    };
  },
  created() {
    let d = new Date().setDate(new Date().getDate() - 1);
    let date = new Date(d).format("yyyy-MM");
    this.dateRange = date;
  },
  methods: {
    selectChange(arr) {
      this.selectCheck = arr;
    },
    indexMethod(index) {
      return index + 1;
    },
    startDateOpt() {
      return {
        disabledDate(time) {
          let _now = Date.now();
          return time.getTime() > _now; //大于当前的禁止
        }
      };
    },
    search() {
      this.searchData();
    },
    //获取表格数据
    searchData() {
      this.$http
        .post("/DataAudit/dataAudit/statisDataAuditByStationMns", {
          startTime: this.dateRange + "-01",
          stationMnList: this.stationMnList
        })
        .then(res => {
          if (res.data.code == 0) {
            this.tableHead = res.data.content.dataList.head;
            this.tableData = res.data.content.dataList.body;
          }
        });
    },
    goDetail(row, prop) {
      this.$store.commit("setisChange", "true");
      this.$store.commit("setLevmenuIndex", 0);
      this.$store.commit("setChildMenu", "/dataAudit/data/threelevelAudit");
      let station = {
        nodeName: row.station.value,
        nodeId: row.stationMn.value,
        structureType: "3"
      };
      this.$store.commit("setStationinfo", station);
      this.$router.push({
        path: "/dataAudit/data/threelevelAudit",
        query: { date: row[prop].name }
      });
    }
  },
  computed: {
    stationInfo: {
      get: function() {
        return this.$store.state.stationInfo;
      }
    }
  },

  watch: {
    stationInfo: function(newValue, oldValue) {
      if (newValue.length > 0) {
        let arr = [];
        for (let i = 0; i < newValue.length; i++) {
          arr.push(newValue[i].nodeId);
        }

        this.stationMnList = arr;
        this.searchData();
      }
    }
  }
};
</script>

<style scoped lang="less">
.doubtPage {
  height: 100%;
  .lengbox {
    font-size: 12px;
    color: #586065;
    float: right;
    margin-top: 8px;
    span {
      margin-right: 28px;
      position: relative;
      &::before {
        content: "";
        width: 12px;
        height: 12px;
        position: absolute;
        left: -17px;
        top: 2px;
      }
      &:nth-child(1) {
        &::before {
          background: #7ec514;
        }
      }
      &:nth-child(2) {
        &::before {
          background: #e5a23c;
        }
      }
      &:nth-child(3) {
        &::before {
          background: #d68787;
        }
      }
    }
  }
  table {
    .cellspan {
      width: 30px;
      height: 25px;
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;
    }
    .statusone {
      background-color: #7ec514;
    }
    .statustwo {
      background-color: #e5a23c;
    }
    .statusthree {
      background-color: #d68787;
    }
  }
}
</style>
